<template>
	<view class="login">
		<view class="head"> </view>
		<view class="tou"><img src="@/imgs/logo.png" /></img></view>
		<view style="margin-top: 30rpx;">
			<view style="text-align: center;">
				<text style="font-size: 34rpx;font-weight: bold;"
				>小羊驼合作商</text>
			</view>
		</view>
		<!-- 账号密码登录 -->
		<view class="con" v-if="status == 0">
			<view class="con_01">
				<view class="con_01_l"><uni-icons type="phone" size="25" color="#E5E5E5"></uni-icons></view>
				<view class="con_01_r"><input v-model="phone" class="uni-input" focus placeholder="请输入手机号"
						style="height: 35px;background-color: #fff;" /></view>
			</view>
			<view class="con_02">
				<view class="con_02_l"><uni-icons type="locked" size="25" color="#E5E5E5"></uni-icons></view>
				<view class="con_02_r"><input type="password" v-model="password" class="uni-input" placeholder="请输入密码"
						@confirm="login()" style="height: 35px;background-color: #fff;" /></view>
				<button class="con_02_t" type="default" v-if="stop" :disabled="true">{{miao}}秒</button>
			</view>
			<view class="con_03" style="display: flex;justify-content: flex-end; margin-top: 10px;">
				<view @click="change_sta">忘记密码？</view>
			</view>
			<div class="con_04_1" @click="login()">登录</div>
		</view>
		<!-- 手机号登录 -->
		<view class="con" v-if="status == 1">
			<view class="con_01">
				<view class="con_01_l"><uni-icons type="phone" size="25" color="#E5E5E5"></uni-icons></view>
				<view class="con_01_r"><input v-model="phone" class="uni-input" focus placeholder="请输入手机号"
						style="height: 35px;background-color: #fff;" /></view>
			</view>

			<view class="con_01">
				<view class="con_02_l"><uni-icons type="locked" size="25" color="#E5E5E5"></uni-icons></view>
				<view class="con_01_r"><input v-model="captcha" class="uni-input" focus placeholder="请输入验证码"
						style="height: 35px;background-color: #fff;" /></view>
				<button class="con_02_t" type="default" @click="send" v-if="!stop">验证码</button>
				<button class="con_02_t" type="default" v-if="stop" :disabled="true">{{miao}}秒</button>
			</view>
			<div class="con_04_1 " style="margin-top: 70px;" @click="loginMobile()">登录</div>
		</view>

		<!-- 登录 -->
		<view v-if="status ==1 || status == 0">
			<!-- 登录方式 -->
			<view style="margin-top: 20px;text-align: center;" v-if="account == 1" @click="accountLogin">快速登录</view>
			<view style="margin-top: 20px;text-align: center;" v-if="account == 2" @click="speedLogin">账号登录</view>
		</view>




		<view class="con" v-if="status == 5">
			<view class="con_01">
				<view class="con_01_l"><uni-icons type="phone" size="25" color="#E5E5E5"></uni-icons></view>
				<view class="con_01_r"><input v-model="phone" class="uni-input" focus placeholder="请输入手机号"
						style="height: 35px;background-color: #fff;" /></view>
			</view>
			<view class="con_02">
				<view class="con_02_l"><uni-icons type="locked" size="25" color="#E5E5E5"></uni-icons></view>
				<view class="con_02_r"><input type="password" v-model="new_psd" class="uni-input" placeholder="请输入新密码"
						style="height: 35px;background-color: #fff;" /></view>

			</view>
			<view class="con_01">
				<view class="con_02_l"><uni-icons type="locked" size="25" color="#E5E5E5"></uni-icons></view>
				<view class="con_01_r"><input v-model="code" class="uni-input" focus placeholder="请输入验证码"
						style="height: 35px;background-color: #fff;" /></view>
				<button class="con_02_t" type="default" @click="send" v-if="!stop">验证码</button>
				<button class="con_02_t" type="default" v-if="stop" :disabled="true">{{miao}}秒</button>
			</view>
			<view class="con_04" style="margin-top: 50px;display: flex;justify-content: space-between;">
				<div class="con_04_1 con_04_3" @click="back">返回登录</div>
				<div class="con_04_1 con_04_2" @click="edit_psd">提交</div>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		login,
		PhoneCaptchaApi,
		codeApi
	} from "@/api/user";
	import {
		Debounce
	} from '@/utils/validate.js'
	import uniIcon from "@/components/uni/uni-icon/uni-icon.vue"
	const BACK_URL = "login_back_url";
	export default {
		data() {
			return {
				stop: false,
				miao: 60,
				phone: '',
				code: '',
				status: '0',
				password: '',
				new_psd: '',
				current: 1,
				account: 1,
				captcha: '', // 验证码
				isShopVerify: false,
			};
		},
		components: {
			uniIcon
		},
		methods: {
			// 去账号登录
			accountLogin() {
				this.password = '',
					this.phone = '',
					this.account = 2
				this.status = 1

			},
			// 去快速登录
			speedLogin() {
				this.account = 1
				this.status = 0
				this.stop = false
			},
			back() {
				// uni.navigateBack()
				this.status = 0
			},
			change_sta() {
				this.status = 5
			},
			edit_psd() {
				const phone = this.phone
				const code = this.code
				const new_psd = this.new_psd
				if (phone.length != 11) {
					this.$api.msg('手机号或验证码错误')
					return;
				}
				uni.showToast({
					title: '修改成功',
					duration: 2000
				});
				setTimeout(function() {
					uni.navigateBack()
				}, 2000)
			},

			/**
			 * 手机号验证码登录
			 */
			loginMobile: Debounce(() => {
				// let that = this;
				// if (!that.phone) return that.$util.Tips({
				// 	title: '请填写手机号码'
				// });
				// if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.phone)) return that.$util.Tips({
				// 	title: '请输入正确的手机号码'
				// });
				// if (!that.captcha) return that.$util.Tips({
				// 	title: '请填写验证码'
				// });
				// if (!/^[\w\d]+$/i.test(that.captcha)) return that.$util.Tips({
				// 	title: '请输入正确的验证码'
				// });
				this.PhoneCaptchaLogin()


			}),
			loginMobile() {
				let that = this;
				if (!that.phone) return that.$util.Tips({
					title: '请填写手机号码'
				});
				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.phone)) return that.$util.Tips({
					title: '请输入正确的手机号码'
				});
				if (!that.captcha) return that.$util.Tips({
					title: '请填写验证码'
				});
				if (!/^[\w\d]+$/i.test(that.captcha)) return that.$util.Tips({
					title: '请输入正确的验证码'
				});
				// uni.showLoading({
				// 	title: '加载中',
				// 	mask: false
				// })
				this.PhoneCaptchaLogin()
			},
			//用户名密码登录
			submit: Debounce(function() {
				let that = this;
				if (!that.phone) return that.$util.Tips({
					title: '请填写账号'
				});
				if (!/^[\w\d]{5,16}$/i.test(that.phone)) return that.$util.Tips({
					title: '请输入正确的账号'
				});
				if (!that.password) return that.$util.Tips({
					title: '请填写密码'
				});
				// if (!that.isAgree) return that.$util.Tips({
				// 	title: that.$t(`message.login.agreement`)
				// });
				// uni.showLoading({
				// 	title: "正在登录中"
				// });
				login({
						account: that.phone,
						pwd: that.password,
						key: "0",
						code: "0",
						terminalType: "mobile",
						spread_spid: that.$Cache.get("spread")
					}).then(({
						data
					}) => {
						that.$store.commit("LOGIN", {
							'token': data.token
						});
						uni.hideLoading();
						that.getUserInfo(data);
					})
					.catch(e => {
						uni.hideLoading();
						that.$util.Tips({
							title: e
						});
					});
			}),
			getUserInfo(data) {
				this.$store.commit('UPDATE_USERINFO', data);
				this.$store.commit("SETUID", data.token);
				let backUrl = this.$Cache.get(BACK_URL) || "/pages/index/index";
				if (!data.isShopVerify) {
					backUrl = '/pages/certification/one/one';
				} else if (backUrl.indexOf('/pages/login/login') !== -1) {
					backUrl = '/pages/index/index';
				}

				let s = '/';// 确保 url 参数以 / 开头
				if(backUrl[0] != s){
					backUrl = s + backUrl;
				}
				uni.reLaunch({
					url: backUrl 
				});
			},
			login() {
				this.submit();
			},
			send() {
				const phone = this.phone
				if (phone.length != 11) {
					this.$api.msg('手机号错误')
					return;
				}
				this.getcode()
				this.stop = true
				this.settime(60)
			},
			settime(smiao) {
				const that = this
				const miao = that.miao
				if (miao == 0) {
					that.miao = 60
					this.stop = false
				} else {
					setTimeout(() => {
						smiao--
						this.miao = smiao
						that.settime(smiao)
					}, 1000)
				}

			},


			// 手机号验证码登录
			async PhoneCaptchaLogin() {
				try {
					let result = await PhoneCaptchaApi({
						phone: this.phone,
						captcha: this.captcha,
						type: 2
					})

					if (result.code == 200) {
						let data = result.data;
						let newTime = Math.round(new Date() / 1000);
						this.$store.commit("LOGIN", {
							'token': result.data.token
						});
						this.getUserInfo(data);
					}

				} catch (e) {
					//TODO handle the exception
					console.log(e)
					this.$util.Tips({
						title: result
					});
				}
			},
			// 发送短信登录验证码
			async getcode() {
				try {
					let result = await codeApi({
						phone: this.phone
					})

				} catch (e) {
					//TODO handle the exception
					console.log(e)
				}
			},
		}
	}
</script>

<style lang="less">
	.login {
		padding-top: 60px;

		.head {
			font-size: 22px;
			padding: 20px;
		}

		.tou {
			text-align: center;
		}

		.tou img {
			width: 64px;
			height: 64px;
		}

		.con {
			padding: 20px 30px;
		}

		.con_01 {
			border-bottom: 2px solid #F7F7F7;
			padding-top: 20px;
			display: flex;
		}

		.con_01_l {
			width: 40px;
			text-align: center;
			padding: 0px 0 5px;
		}

		.con_01_r {
			flex-grow: 1;
			padding-right: 10px;
		}

		input::-webkit-input-placeholder {
			color: #D2D2D2;
		}

		.con_03 {
			font-size: 12px;
			color: #F78674;
			padding: 15px 0 33px 8px;
			display: flex;
			justify-content: space-between;
		}

		.con_04_1 {
			background-color: #E61874;
			color: #ffffff;
			border-radius: 25px;
			height: 35px;
			line-height: 35px;
			font-size: 14px;
			text-align: center;
			border: 1px solid #F0F0F0;
			width: 100%;
		}

		.con_04_2 {
			background-color: #E61874;
			color: #ffffff;
			width: 40%;
		}

		.con_04_3 {
			background-color: #E9E8E5;
			color: #81817E;
			width: 40%;
		}

		.con_05 {
			padding: 20px 0;
			text-align: center;
			color: #F78674;
		}

		.con_05 span {
			padding-left: 20px;
		}

		.con_02 {
			border-bottom: 2px solid #F7F7F7;
			padding-top: 15px;
			display: flex;
			justify-content: space-between;
		}

		.con_02_t {
			background-color: #E0441D;
			color: #fff;
			height: 30px;
			line-height: 30px;
			border-radius: 20px;
			padding: 0 20px;
			margin-bottom: 5px;
			font-size: 28upx;
		}

		.con_02_r {
			flex-grow: 1;
			padding-right: 10px;
			margin-top: 5px;
		}

		.con_02_l {
			width: 40px;
			text-align: center;
			padding: 5px 0 5px;
		}
	}
</style>